<!--  -->
<template>
    <view
        class="grid grid-cols-4 h-14 absolute Tabbar w-full place-items-center z-50"
    >
        <view
            v-for="(item, index) in tabItems"
            :key="index"
            class="transition-all size-full flex flex-col justify-center items-center"
            :class="$global.activeTab == index && 'active-tab'"
            @click="switchTab(index)"
        >
            <view class="tabbar-icon-out w-8 h-8">
                <view class="tabbar-icon size-full">
                    <i class="iconfont icon" :class="item.icon"></i
                ></view>
            </view>
            <view>{{ item.label }}</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { $global } from "@/store";
import { onShow } from "@dcloudio/uni-app";
import { reactive } from "vue";
const tabItems = reactive([
    {
        label: "首页",
        path: "/pages/homePage/index",
        icon: "icon-ic_tab_home_un",
    },
    {
        label: "房源",
        path: "/pages/housingResources/index",
        icon: "icon-ic_tab_fangyuan_un",
    },
    {
        label: "资讯",
        path: "/pages/information/index",
        icon: "icon-ic_tab_zixun_un",
    },
    {
        label: "我的",
        path: "/pages/mine/index",
        icon: "icon-ic_tab_me_un",
    },
]);

const switchTab = (idx: number) => {
    $global.activeTab = idx;
    uni.switchTab({
        url: tabItems[idx].path,
    });
};

onShow(() => {
    uni.hideTabBar();
});
</script>
<style scoped lang="scss">
.Tabbar {
    background-color: $uni-text-color-inverse;
    box-shadow: 0 -8rpx 8rpx $uni-box-shadow;
    bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
    color: $uni-text-color;
    .tabbar-icon-out {
        transition: all 0.5s;
        .tabbar-icon {
            transform-origin: 50% 100%;
            display: flex;
            border-radius: 50%;
            justify-content: center;
            align-items: center;
            transition: all 0.5s;
            .icon {
                color: $uni-text-color;
                border-radius: 50%;
                transition: all 0.5s;
                width: 100%;
                height: 100%;
                font-size: 36rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
.active-tab {
    color: $uni-color-primary;
    .tabbar-icon-out {
        .tabbar-icon {
            padding: 6rpx;
            background-color: $uni-text-color-inverse;
            box-shadow: 0 -8rpx 8rpx $uni-box-shadow;
            scale: 1.5;
            .icon {
                color: $uni-text-color-inverse;
                line-height: 52rpx;
                font-size: 24rpx;
                background-color: $uni-color-primary;
            }
        }
    }
}
</style>
